// 路由过度动画 framer-motion
import { AnimatePresence, motion } from 'framer-motion';
// StrictMode 备注：在开发模式("dev")下，且使用了严格模式("Strict Mode")下请求会触发两次
// import React, { StrictMode } from 'react';
import { useLocation, useOutlet } from '@umijs/max';
import { ConfigProvider, Image } from 'antd';
import React, { useEffect, useRef, useState } from 'react';

import styles from './index.module.less';

// antd设置语言
import zhCN from 'antd/es/locale/zh_CN';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
dayjs.locale('zh-cn');

import iconHt from '@/assets/images/icon-ht.png';
import iconOut from '@/assets/images/icon-out.png';
import iconQp from '@/assets/images/icon-qp.png';

import { useFullscreen } from 'ahooks';

const LayoutIndex: React.FC = () => {
  const { pathname } = useLocation();
  // console.log(pathname)
  const fullScreenRef = useRef(null);
  // const [isFullscreen, { enterFullscreen, exitFullscreen, toggleFullscreen }] = useFullscreen(ref);
  const [, { toggleFullscreen }] = useFullscreen(fullScreenRef);

  // const { initialState } = useModel('@@initialState');
  const [currentTime, setCurrentTime] = useState(new Date());
  const [currentDateTime, setCurrentDateTime] = useState('');

  const [menuBoxShow, setMenuBoxShow] = useState(false);

  const outlet = useOutlet();
  // console.log('location', location)
  // 获取当前日期
  const getDate = () => {
    const yy = currentTime.getFullYear();
    const mm = currentTime.getMonth() + 1;
    const dd = currentTime.getDate();
    const dateTime = yy + '年' + mm + '月' + dd + '日 ';
    setCurrentDateTime(dateTime);
    // console.log('currentTime', currentTime.toLocaleString());
  };

  useEffect(() => {
    
    const intervalId = setInterval(() => {
      setCurrentTime(new Date());
      getDate();
    }, 1000); // 每秒更新一次
    return () => clearInterval(intervalId);
  }, []);

  return (
    // <StrictMode>
    <div>
      <div className={styles['box']} ref={fullScreenRef}>
        
        <AnimatePresence mode="wait">
          <motion.div
            key={location.pathname}
            initial={{ y: 10, opacity: 0 }}
            animate={{ y: 0, opacity: 1 }}
            exit={{ y: -10, opacity: 0 }}
            transition={{ duration: 0.3 }}
          >
            <div className={styles['bg-contain']}>
              <div className={styles['box-header']} >
                <div className={styles['box-header-title']}>鱼类加工产线数据监控平台</div>
              </div>
             
             

              {/* 右边菜单 */}
              <div className={styles['right-bar-main']}>
                {pathname != '/boardtr' && pathname != '/boardtf' ? (
                  <>
                 
                  </>
                ) : null}

                {/* 设置 */}
                {/* <div
                  className={styles['icon-set']}
                  onClick={() => setMenuBoxShow(!menuBoxShow)}
                ></div> */}
                {/* <div
                      style={{display:'flex'}}
                      onClick={toggleFullscreen}
                    >
                      <Image
                        src={iconQp}
                        preview={false}
                        height="0.22rem"
                      />{' '}
                      <div style={{marginLeft: '0.05rem'}}>全屏切换</div>
                    </div> */}
                {/* 设置下拉 */}
                {menuBoxShow ? (
                  <div className={styles['set-down-box']}>
                    <div
                      className={styles['set-down-item']}
                      onClick={toggleFullscreen}
                    >
                      <Image
                        src={iconQp}
                        preview={false}
                        width="0.2rem"
                        height="0.19rem"
                      />{' '}
                      全屏显示
                    </div>
                    <div className={styles['set-down-item']}>
                      <Image
                        src={iconHt}
                        preview={false}
                        width="0.2rem"
                        height="0.19rem"
                      />{' '}
                      系统后台
                    </div>
                    <div className={styles['set-down-item']}>
                      <Image
                        src={iconOut}
                        preview={false}
                        width="0.2rem"
                        height="0.19rem"
                      />{' '}
                      退出登录
                    </div>
                  </div>
                ) : null}
              </div>
              <ConfigProvider
              locale={zhCN}
             
            >
              {outlet}
            </ConfigProvider>
            </div>

            
          </motion.div>
        </AnimatePresence>
      </div>
    </div>
    // </StrictMode>
  );
};

export default LayoutIndex;
